
<style scoped lang="less">
.census-main{
	padding: 20px;
	margin-left: 0;
}
</style>
<template>
	<div class="page-census page-setting">
		<div class="crumbs">
			<router-link to="/">首页</router-link> / <span class="active">{{title}}</span>
		</div>
		<div class="census-main" :style="{height: mainH+'px'}">
	  		<div class="opers flex v-c">
	  			<el-form :inline="true" class="filter-blk flex-1">
					<el-form-item label="单位名称">
						<el-input placeholder="请输入单位名称" v-model.trim="filterForm.businessName"></el-input>
					</el-form-item>
					<el-form-item class="ml-20" label="设备编号">
						<el-input placeholder="请输入设备编号" v-model.trim="filterForm.number"></el-input>
					</el-form-item>
					<el-form-item class="ml-20" label="起始时间">
                        <el-date-picker
                            v-model="dateRange"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd"
                            @change="dateChange">
                        </el-date-picker>
                    </el-form-item> 
					<el-form-item>
						<el-button type="primary" @click="searchAction"><i class="iconfont icon-search"></i> 查询</el-button>
					</el-form-item>
				</el-form>
				<div>
					<!-- <el-button v-if="hasPermission('018003')" type="blue" @click="">大屏</el-button> -->
				</div>
	  		</div>
	  		<el-table 
  				:data="dataList" 
  				style="width: 100%"
  				v-loading="loading">
			    <el-table-column prop="businessName" label="所属单位"></el-table-column>
			    <el-table-column prop="number" label="设备编号"></el-table-column>
			    <el-table-column prop="todayValue" label="日累计流量"></el-table-column>
			    <el-table-column prop="cumulativeValue" label="总累计流量"></el-table-column>
			    <el-table-column prop="dataTime" label="数据发送日期"></el-table-column>
			</el-table>
			<el-pagination
				v-if="total>0"
				class="text-right mt-20 mr-20"
		      	@current-change="handleCurrentChange"
		      	:current-page="currentPage"
		      	:page-size="pageSize"
		      	layout="prev, pager, next, total, jumper"
		      	:total="total">
		    </el-pagination>
	  	</div>
	</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
	name: 'Ultrasonic',
	props: {
		winH: {
			type: Number,
			default: 500
		}
	},
	// <!-- 1 电气火灾 2 消防用水 3 烟感 4 可燃气体 5 火灾自动联网 6 消防可视化 -->
	data () {
		return {
            title: this.$route.query.title || '远程抄表',
            dateRange: [],
			filterForm: {},
			loading: false,
			total: 0,
			currentPage: 1,
			pageSize: 8,
			loading: false,
			dataList: [],
		}
	},
	computed: {
		...mapState([
			'siteInfos'
		]),
		mainH () {
			return this.winH-180
		},
	},
	watch: {
	},
	methods: {
		dateChange (value) {
			this.filterForm.startTime = value[0]
            this.filterForm.endTime = value[1]
		},
		getData(page){
			this.loading = true
			let params = Object.assign({
            	page: page,
			    limit: this.pageSize
            },this.filterForm)

			this.$get('/fireFightingIOT/ultrasonic/ultrasonicDeviceNormalLogListPage', params).then(res => {
            	this.loading = false
            	let data = res.data
                this.currentPage = page
                this.total = data.totalSize
                this.dataList = data.Items
            }, (err) =>{
            	this.loading = false
            	this.currentPage = page
                this.total = 0
                this.dataList = []
				if(err.msg){
					this.$message.error(err.msg);
				}
            })
		},
		searchAction () {
			this.getData(1)
		},
		handleCurrentChange (page) {
			this.getData(page)
		},
	},
	created () {
		this.getData(1)
	},
	activated () {},
	mounted () {}
}
</script>
